<template>
    <!-- icloud账号管理 -->
    <div>
        <div class="opeCom">
            <h4>iCloud账号管理</h4>
            <div class="choice">
                <el-form ref="form" :model="form" size="mini" :inline="true" class="demo-from-inline">
                    <el-form-item label="">
                        <el-select v-model="form.region1" placeholder="所有">
                            <el-option label="所有" value="she"></el-option>
                            <el-option label="空闲" value="he"></el-option>
                            <el-option label="已锁定" value="me"></el-option>
                            <el-option label="绑定" value="i"></el-option>
                            <el-option label="已禁用" value="her"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input v-model="form.number" placeholder="请输入Appleld"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button type="primary">确定</el-button>
                    </el-form-item>
                    <el-form-item label="">
                        <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" multiple :limit="3" :on-exceed="handleExceed" :file-list="fileList">
                            <el-button size="mini" type="primary">上传表格</el-button>
                        </el-upload>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
            <el-table-column prop="name" label="iCloud账号" width="250px">
            </el-table-column>
            <el-table-column prop="time" label="注册时间">
            </el-table-column>
            <el-table-column prop="status" label="状态">
            </el-table-column>
            <el-table-column prop="count" label="已使用次数">
            </el-table-column>
            <el-table-column prop="operate" label="操作">
                <template slot-scope="scope">
                        <router-link :to="'/icloud-detail/'+scope.row.id">
                            <el-button type="text" size="small" >查看详情</el-button>
                            </router-link>
                </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="prev,pager,next"
        :page-size="pagesize"
        :current-page="currentPage"
        :total="tableData.length"
        >

        </el-pagination>
    </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                pagesize:1,
                currentPage:1,
                form: {
                    region1: '',
                    region2: '',
                    date1: '',
                    date2: '',
                    id: ''
                },
                tableData: [{
                        id: '1',
                        name: 'jimy0689@qichekb.com1',
                        time: '2017-11-28',
                        status: '已绑定',
                        count: '--',
                        operate: '查看详情'
                    },
                    {
                        id: '2',
                        name: 'jimy0689@qichekb.com2',
                        time: '2017-11-28',
                        status: '已绑定',
                        count: '--',
                        operate: '查看详情'
                    },
                    {
                        id: '3',
                        name: 'jimy0689@qichekb.com3',
                        time: '2017-11-28',
                        status: '已绑定',
                        count: '--',
                        operate: '查看详情'
                    },
                    {
                        id: '4',
                        name: 'jimy0689@qichekb.com4',
                        time: '2017-11-28',
                        status: '已绑定',
                        count: '--',
                        operate: '查看详情'
                    }
                ],
                fileList: []
            }
        },
        methods: {
            handleRemove(file, fileList) {
                //console.log(file, fileList);
            },
            handlePreview(file) {
                //console.log(file);
            },
            handleExceed(files, fileList) {
                //this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            handleSizeChange(val){
this.pagesize=val;
            },
            handleCurrentChange(val){
            this.currentPage=val;
        }
        }
    }
</script>
<style lang="scss" scoped>
    @import '../../css/topChoice.scss';
    @import '../../css/loan.scss';
</style>
